import BScroll from 'better-scroll';
import { inlandData } from '../../config/city/inlandData.js';
import { inlandHot } from '../../config/city/inlandHot.js';
import { internationData } from '../../config/city/internationData.js';
import { interHot } from '../../config/city/interHot.js';
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'city',
	data() {
		return {
			activeTab: 'inland',
			indexValue: "A",
			indicatorShow: false,
			listHeight: [],
			scrollY: 0,
			search: "",
			searchData: [],
			data: inlandData,
			hot:inlandHot
		}
	},
	computed: {
		...mapState([
			'city',
		]),
		currentIndex() {
			
			for(let i = 0; i < this.listHeight.length; i++) {
				let height1 = this.listHeight[i];
				let height2 = this.listHeight[i + 1];
				if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
					return i;
				}
			}
			return 0;
		},
		searchPanle() {
			if(this.search == "") {
				return false;
			} else {
				return true;
			}
		},
		searchResult(){
			var data = this.data;
			var key = (this.search).toUpperCase();
			var filterResult = [];
			for(let i in data){
				for(let j=0;j<data[i].length;j++){
					var matchStr = data[i][j].match;					
					if(matchStr.indexOf(key) > -1 ){
						filterResult.push(data[i][j]);
					}
				}
			}
			return filterResult;
		}

	},
	methods: {
		...mapMutations([
			'RECORD_CITY','RECORD_ISINLAND',
		]),
		handleTabChange(val) {
			this.activeTab = val;
			if(val == "inland"){
				this.data = inlandData;
				this.hot = inlandHot;
			}
			if(val == "internation"){
				this.data = internationData;
				this.hot = interHot;
			}
			this.$nextTick(() => {
				this._calculateHeight();
				this.cityScroll.refresh();
			});
		},
		seclectCity(value) {
			if(this.activeTab=="inland") this.RECORD_ISINLAND(true);
			else this.RECORD_ISINLAND(false);
			if (value) this.RECORD_CITY(value);
			this.$router.push({ path: '/' });
		},
		cancel() {
			this.search = "";
		},
		seclectIndex(i, index) {
			var that = this;
			this.indexValue = i;
			this.indicatorShow = true;
			//显示索引
			setTimeout(function() {
				that.indicatorShow = false;
			}, 500)
			//点击滚动
			let titleList = document.getElementsByClassName("indexsection-hook");
			let el = titleList[index];
			this.cityScroll.scrollToElement(el, 300);

		},
		_initScroll() {
			var that = this;
			this.cityScroll = new BScroll(this.$refs.allCity, {
				probeType: 3,
				click: true
			})
			this.cityScroll.on('scroll', function(pos) {
				that.scrollY = Math.abs(Math.round(pos.y));
				
			})
		},
		_calculateHeight() {
			this.listHeight = [];
			let titleList = document.getElementsByClassName("indexsection-hook");
			let height = 0;
			this.listHeight.push(height);
			for(var i = 0; i < titleList.length; i++) {
				let item = titleList[i];
				height += item.clientHeight;
				this.listHeight.push(height);
			}
		}
	},
	created() {
		document.title = "城市选择";
		this.$nextTick(() => {
			this._initScroll();
			this._calculateHeight()
			
		});
		
	}
}